<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

<body>
    <pre>
    <input type="password"><img src="../JS素材/mess.png"><span>密码请输入长度为6-16</span>
    </pre>

    <script>
        var pd = document.querySelector('input');
        var te = document.querySelector('span');
        var pi = document.querySelector('img');
        pd.onblur = function() {
            if (this.value.length < 6 || this.value.length > 16) { //this代表pd获取input标签的元素
                te.style.color = 'red';
                document.querySelector('img').src = "../JS素材/wrong.png"; /*通过改变img的src改变图标*/
                te.textContent = '错误！！！输入长度应在6-16';
            } else {
                te.style.color = 'green';
                document.querySelector('img').src = "../JS素材/right.png";
                te.textContent = '输入正确';
            }
        }
    </script>
</body>

</html>